<template>
  <div class="m-menu">
    <dl class="nav" @mouseleave="leave">
      <dt>全部分类</dt>
      <dd v-for="(item, index) in menu" :key="index" @mouseenter="enter">
        <i :class="item.typename" />{{item.name}}<span class="arrow" />
      </dd>
    </dl>

    <div class="detail" v-if="kind"  @mouseenter="detailEnter"  @mouseleave="detailLeave">
      <div v-for="item in curdetail.child" :key="item.title">
        <h4>{{item.title}}</h4>
        <span v-for="(v, i) in item.child" :key="i">
          {{v}}
        </span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      kind: '',
      _timer: null
    };
  },

  methods: {
    enter(e) {
      this.kind = e.target.querySelector('i').className
    },
    leave() {
      let self = this
      this._timer = setTimeout(() => {
        self.kind = ''
      }, 120)
    },
    detailEnter() {
      clearTimeout(this._timer)
    },
    detailLeave() {
      this.kind = ''
    }

  },
  computed: {
    menu() {
      return this.$store.state.api.menu
    },
    curdetail() {
      return this.menu.filter(item => item.typename == this.kind)[0]
    }
  }
};
</script>